<template>
  <div class="demo">
    <template>
      <div v-if="mode === 'edit'">
        <el-input v-model="emailStr" placeholder="请输入邮箱" @input="check" :disabled="disabled"></el-input>
        <div class="el-form-item__error" v-if="emailError">邮箱格式不正确！</div>
      </div>
      <div v-else>{{ value }}</div>
    </template>
  </div>
</template>

<script>
//必须引入这个，否则数据不会回传
import datasource from '../../mixins/steps-datasource'
export default {
  name: 'email',
  mixins: [datasource],
  components: {},
  props: {
    value:{},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      emailStr: '',
      emailError: ''
    }
  },
  watch: {},
  created() {},
  mounted() {
    console.log(this.value,"this.value");
    if(this.value){
    this.emailStr = this.value;
    if(this.mode == 'view'){
        this.disabled = true;
    }
  }
  },
  methods: {
    check(){
      this.$emit("input", this.emailStr)
      console.log(this.emailStr,"this.emailStr");
      var re = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
      var result = re.test(this.emailStr); 
      if(!result & this.emailStr!=='') {
        this.emailError = true
      } else {
        this.emailError = false
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
}
</style>